<template>
  <div class="wode">
    <div class="wode-title">
      <span>我的歌单</span>
      <span class="addsonglist" @click="clickmanage()">管理歌单&nbsp;></span>
    </div>
    <div class="mysonglist">
      <template v-for="(item, index) in playlist">
        <div class="mysong">
          <router-link :to="{path:'/wode/wodedetail/id',query:{id:item.id,title:item.name}}">
            <div class="song-img">
              <img :src="item.coverImgUrl" />
            </div>
            <div class="song-info">
              <div class="van-ellipsis">{{item.name}}</div>
            </div>
          </router-link>
        </div>
      </template>
    </div>
    <!-- 管理歌单弹出层 -->
    <van-popup v-model="manageshow" round position="bottom" :style="{ height: '30%' }">
      <div class="managesonglist-title">管理歌单</div>
      <div class="createsonglist" @click="clickcreate">
        <van-icon name="add-o" />
        <span>创建歌单</span>
      </div>
      <div class="deletesonglist" @click="clickdelete">
        <van-icon name="delete" />
        <span>删除歌单</span>
      </div>
    </van-popup>

    <!-- 新建歌单弹出层 -->
    <van-popup v-model="createshow" round :style="{ height: '30%' }">
      <div class="pop-title">新建歌单</div>
      <van-field
        v-model="namemsg"
        center
        clearable
        placeholder="请输入歌单名"
        maxlength="15"
        :autofocus="isautofocus"
        show-word-limit
      ></van-field>
      <div class="button">
        <span class="cancel" @click="clickcancel">取消</span>
        <span class="confirm" @click="clickconfirm">提交</span>
      </div>
    </van-popup>

    <!-- 删除歌单弹出层 -->
    <van-popup class="deletepop" v-model="deleteshow" round :style="{ height: '50%' }">
      <div class="pop-title">删除歌单</div>
      <template v-for="(item, index) in playlist">
        <div class="usersonglist" @click="deletesonglist(item.id)">
          <span>
            <img :src="item.coverImgUrl" />
          </span>
          <div class="van-ellipsis">{{item.name}}</div>
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script>
import send from "../navshow";
import player from "../components/player";

export default {
  data() {
    return {
      playlist: [], //歌单列表
      manageshow: false, //隐藏管理歌单弹出层
      createshow: false, //隐藏新建歌单弹出框
      deleteshow: false, //隐藏删除弹出层
      namemsg: "", //输入框内容
      isautofocus: true //自动聚焦
    };
  },
  created() {
    //显示导航栏
    send.$emit("tab-show", true);

    // 显示播放器
    this.$store.commit("showplayer", true);

    var date = new Date();

    // 获取用户歌单
    let url =
      "http://localhost:3000/user/playlist?uid=" +
      sessionStorage.getItem("id") +
      "&timestamp=" +
      date.getTime();
    this.axios.get(url).then(res => {
      this.playlist = res.data.playlist;
    });
  },
  methods: {
    // 显示管理弹出层
    clickmanage() {
      this.manageshow = true;
    },

    // 显示创建弹出层
    clickcreate() {
      this.createshow = true;
    },

    // 确认按钮
    clickconfirm() {
      let url = "http://localhost:3000/playlist/create?name=" + this.namemsg;

      if (this.namemsg != "") {
        // 新建歌单
        this.axios({
          url,
          withCredentials: true //关键
        }).then(res => {
          if (res.status == 200) {
            this.createshow = false;
            this.manageshow = false;
            this.$toast("创建成功");
            this.namemsg = "";
            var date = new Date();
            // 获取用户歌单
            let url =
              "http://localhost:3000/user/playlist?uid=" +
              sessionStorage.getItem("id") +
              "&timestamp=" +
              date.getTime();
            this.axios.get(url).then(res => {
              this.playlist = res.data.playlist;
              console.log(this.playlist);
            });
          }
        });
      }
    },

    clickcancel() {
      this.createshow = false;
      this.manageshow =false;
    },

    // 删除弹出层
    clickdelete() {
      this.deleteshow = true;
    },

    // 删除歌单
    deletesonglist(id) {
      let url = "http://localhost:3000/playlist/delete?id=" + id;

      // 删除歌单
      this.$dialog
        .confirm({
          message: "确认删除此歌单？"
        })
        .then(() => {
          this.axios({
            url,
            withCredentials: true //关键
          }).then(res => {
            if (res.status == 200) {
              this.deleteshow = false;
              this.manageshow = false;
              this.$toast("创建成功");
              this.namemsg = "";
              var date = new Date();
              // 获取用户歌单
              let url =
                "http://localhost:3000/user/playlist?uid=" +
                sessionStorage.getItem("id") +
                "&timestamp=" +
                date.getTime();
              this.axios.get(url).then(res => {
                this.playlist = res.data.playlist;
              });
            }
          });
        })
        .catch(() => {
          this.deleteshow = false;
          this.manageshow = false;
        });
    }
  }
};
</script>

<style>
.wode {
  margin-top: 85px;
  height: 90vh;
}

.wode-title {
  margin-top: 30px;
  margin-left: 6vw;
  margin-bottom: 15px;
  font-size: 20px;
  color: #222831;
  font-weight: bold;
  border-left: 5px solid red;
  padding-left: 10px;
}

.wode-title .addsonglist {
  margin-left: 42vw;
  font-size: 14px;
  color: #555555;
}

.wode .mysonglist {
  width: 90vw;
  margin-left: 7vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 60px;
}

.wode .mysong {
  width: 40vw;
  height: 24vh;
  display: flex;
  margin-top: 5px;
}

.wode .song-img {
  width: 35vw;
  height: 18vh;
}

.wode .song-img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.wode .song-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wode .van-ellipsis {
  width: 35vw;
  font-size: 14px;
  color: #222831;
  margin: 5px 0 0 0;
  text-align: center;
}

/* 管理弹出层 */
.wode .managesonglist-title {
  font-size: 16px;
  margin-top: 15px;
  margin-left: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

.wode .createsonglist,
.wode .deletesonglist {
  width: 90vw;
  height: 8vh;
  margin: 0 auto 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dbdbdb;
}

.wode .createsonglist span,
.wode .deletesonglist span {
  margin-left: 10px;
}

/* 创建弹出层 */
.wode .van-cell {
  width: 80vw;
  margin: 0 auto 0;
}

.wode .pop-title {
  font-size: 16px;
  margin-top: 10px;
  margin-left: 20px;
  font-weight: bold;
}

.wode input {
  width: 70vw;
  height: 40px;
  margin: 5px auto 0;
  font-size: 14px;
  border-bottom: 1px solid #dbdbdb;
}

.wode .van-field__word-limit {
  margin-top: 10px;
  font-size: 12px;
}

.wode .button {
  width: 30vw;
  margin-left: 45vw;
  margin-top: 10px;
  font-size: 16px;
}

.wode .cancel,
.wode .confirm {
  margin-left: 5vw;
  color: red;
}

/* 删除弹出层 */
.wode .deletepop {
  width: 80vw;
}

.wode .usersonglist {
  width: 70vw;
  height: 8vh;
  margin: 10px auto 15px;
  display: flex;
  align-items: center;
}

.wode .usersonglist img {
  width: 15vw;
  height: 55px;
  border-radius: 5px;
}

.wode .usersonglist .van-ellipsis {
  text-align: left;
  font-size: 16px;
  margin-left: 15px;
}
</style>
